import React, { useEffect, useRef } from "react";
function ClickHoc(Component: any) {
  const Wrap: any = (props: any) => {
    const dom = useRef<any>(null);
    useEffect(() => {
      const handleClick = () => console.log("发生点击事件");
      dom.current?.addEventListener("click", handleClick);
      return () => dom.current?.removeEventListener("click", handleClick);
    }, []);
    return (
      <div ref={dom}>
        <Component {...props} />
      </div>
    );
  };
  return Wrap;
}

@ClickHoc
class Index extends React.Component<any, any> {
  render() {
    return (
      <div className="index">
        <p>hello，world</p>
        <button>组件内部点击</button>
      </div>
    );
  }
}
export default () => {
  return (
    <div className="box">
      <Index />
      <button>组件外部点击</button>
    </div>
  );
};
